import { ActionType, PageContainer, ProCard, ProColumns, ProTable, StatisticCard } from '@ant-design/pro-components';
import React from "react";
import { items, loadCount, loadTableData } from './props';
import { useModel } from "@umijs/max";
import { EasyComment, EasyExecute } from '@/pages/ProcessInstance/components';
import { Space } from "antd";
const { Statistic } = StatisticCard;

const HomePage: React.FC = () => {

    const { initialState } = useModel('@@initialState');
    const { users, groups } = initialState;
    const table = React.useRef<ActionType>();
    const [dataItem, setDataItem] = React.useState(items);

    const userColumns = (key: string): ProColumns[] => [
        {
            title: '待办人',
            dataIndex: 'assignee',
            hideInTable: key.startsWith('me'),
            valueType: 'select',
            request: async () => users
        },
        {
            title: '流程发起人',
            dataIndex: 'startUserId',
            valueType: 'select',
            request: async () => users
        },
        {
            title: '操作',
            hideInTable: key === 'todo',
            align: 'center',
            render: (dom, { comments, nodeName, processInstanceId, taskId }) => <Space>
                { (comments && comments.length) ? <EasyComment form={false} comments={comments} taskName={nodeName}/> : null }
                { (taskId && processInstanceId) ? <EasyExecute
                    link processInstanceId={processInstanceId}
                    taskId={taskId} reload={() => table.current?.reloadAndRest()}/> : null }
            </Space>
        }
    ];

    React.useEffect(() => {
        loadCount().then((res) => {
            if (res) {
                setDataItem(items.filter(i => {
                    i.value = res[i.key];
                    return true;
                }))
            }
        })
    }, []);

    return <PageContainer title="首页统计">
        <ProCard tabs={{
            items: dataItem.map((item) => {
                return {
                    key: item.key,
                    style: { width: '100%' },
                    label: <Statistic layout="vertical" title={item.title}
                      value={item.value} status={item.status}
                      style={{
                          width: 120,
                          borderInlineEnd: item.total ? '1px solid #f0f0f0' : undefined,
                      }}
                    />,
                    children: <ProTable
                        search={false}
                        size="small"
                        request={loadTableData}
                        params={{ params: item.key }}
                        pagination={{ defaultPageSize: 10 }}
                        scroll={{ y: 450 }}
                        rowKey="id"
                        columns={item.columns.concat(userColumns(item.key))} />,
                };
            }),
        }}/>
    </PageContainer>;
};

export default HomePage;
